<template>
  <div>
    <ul>
      <!-- v-for作用：  生成多个标签。 需要多个什么标签，就写在什么标签上 -->
      <!--语法： v-for=" item in 数组" :key="数据.id" -->
      <li v-for="item in list" :key="item.id">
        <p>姓名: {{ item.name }}</p>
        <p>年龄: {{ item.age }}</p>
        <p>性别: {{ item.gender }}</p>
      </li>
    </ul>

    <ul>
      <!--语法： v-for=" (item, index) in 数据"  :key="数据.id"-->
      <li v-for="(item, index) in list" :key="item.id">
        <p>顺序: {{ index + 1 }}</p>
        <p>姓名: {{ item.name }}</p>
        <p>年龄: {{ item.age }}</p>
        <p>性别: {{ item.gender }}</p>
      </li>
    </ul>

    <!-- 注意： item和index， 只能在v-for的范围内使用 -->
    <!-- ❌ <div>{{ item }} -- {{ index }}</div> -->
  </div>
</template>

<script>
//  自动格式化
export default {
  data() {
    return {
      list: [
        { id: 1, name: "芜湖老师", age: 18, gender: "男" },
        { id: 2, name: "博博老师", age: 17, gender: "男" },
        { id: 3, name: "小美老师", age: 16, gender: "女" },
      ],
    };
  },
};
</script>

<style></style>
